<template>
  <div class="home-container">
    <div
      class="search"
      style="position: fixed; top: 0; width: 100%; z-index: 99"
    >
      <van-search
        v-model="value"
        shape="round"
        background="#3296fa"
        placeholder="请输入搜索关键词"
        @focus="$router.push('/search')"
      />
    </div>
    <!--  /* 头部导航栏 */ -->
    <div class="bar" style="">
      <van-tabs v-model="activeIndex" swipeable>
        <van-tab
          v-for="(channel, index) in channels"
          :title="channel.name"
          :key="index"
        >
          <!-- {{ channel }} -->

          <!-- 上拉加载组件 -->

          <!-- 文章列表 -->
          {{ activeIndex }}======
          <article-list :channel="channel"></article-list>
          <!-- 文章列表 -->
        </van-tab>
        <div
          slot="nav-right"
          style="width: 24px;height:24px; flex-shrink: 0"
        ></div>

        <van-icon
          @click="show = true"
          class="hangb"
          slot="nav-right"
          name="bars"
        />
      </van-tabs>
    </div>
    <!-- <div class="list">
            <van-cell-group>
                <van-cell title="单元格" value="内容" label="描述信息" />
                <van-cell title="单元格" value="内容" label="描述信息" />
            </van-cell-group>
        </div> -->

    <!-- 弹出层 -->
    <van-popup
      closeable
      close-icon-position="top-left"
      v-model="show"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <article-edit
      @activeindexfunc='activeindexfunc'
        @popupshow="popupshow"
        :activeIndex="activeIndex"
        :myChannels="channels"
      ></article-edit>
    </van-popup>
  </div>
</template>

<script>
import { channelsApi } from "@/api";

//  导入局部文章列表组件   article-list
import articleList from "./components/article-list";
import articleEdit from "./components/article-edit";

import { mapState } from "vuex";
import { getItem } from "../../utlis/storage";

export default {
  data() {
    return {
      value: "123",
      activeIndex: 0,
      channels: [],

      //  弹出层
      show: false
    };
  },
  computed: {
    ...mapState(["user"])
  },
  created() {
    //  获取频道
    this.getChannels();
  },
  methods: {
    async getChannels() {
      // const { data: res } = await channelsApi();
      // console.log(res, 7777);

      // this.channels = res.data.channels;
      /* 
      判断用户是否登录
      +  如果登录  就发送请求获取 我的频道  
      +  如果未登录  获取本地缓存 
        + 如果本地缓存有值就直接取，没有就接着发送请求
      
      */
      if (this.user) {
        const { data: res } = await channelsApi();
        console.log(res, 7777);

        this.channels = res.data.channels;
      } else {
        if (getItem("myChannels").length) {
          this.channels = getItem("myChannels");
        } else {
          const { data: res } = await channelsApi();
          console.log(res, 7777);

          this.channels = res.data.channels;
        }
      }
    },

    // 接收子组件传过来的值   并且让当前tabs显示高亮
    popupshow(index) {
      this.activeIndex = index;
      this.show = false;
    },

    /* 获取子组件传递过来的索引来显示哪一个高亮频道 */
    activeindexfunc(index){
      this.activeIndex = index;
    }
  },

  components: {
    articleList,
    articleEdit
  }
};
</script>
<style scoped lang="less">
.home-container {
  .van-search {
    overflow: hidden;
    padding: 20px 100px;
    background-color: #3296fa;
    .van-search__content {
      background: rgba(255, 255, 255, 0.2);

      .van-cell {
        position: relative;
        left: 41%;
        color: #fff;

        /deep/.van-field__control {
          color: #fff;
        }
      }
    }
  }

  .hangb {
    position: fixed;
    right: 0;
  }

  /deep/.van-tabs__wrap {
    height: 1.17333rem;
    position: fixed;
    top: 110px;
    z-index: 99;
    .van-tabs__nav {
      align-items: center;
    }
  }

  /deep/.van-tabs__content {
    padding-top: 150px;
  }
}
</style>
